<script setup>
  import { getPatientMedicineOrderDetailApi } from '@/services/medicine.js'
  import { computed, onUnmounted, ref } from 'vue'
  const props = defineProps()
  // 药口订单详情
  const orderDetail = ref({})
  ;(async () => {
    const res = await getPatientMedicineOrderDetailApi(props.orderId)
    orderDetail.value = res.data.data
  })()
  // 订单状态
  const orderStatus = ref({
    10: '待支付',
    11: '待发货',
    12: '待收货',
    13: '已完成',
    14: '已取消'
  })
  // 支付方式
  const paymentMethods = ['微信支付', '支付宝支付']
  //支付倒计时
  const countDown = ref(15 * 60)
  //分钟
  const minute = computed(() => {
    return Math.floor(countDown.value / 60) > 10
      ? Math.floor(countDown.value / 60)
      : '0' + Math.floor(countDown.value / 60)
  })
  //秒
  const second = computed(() => {
    return countDown.value % 60 > 10
      ? countDown.value % 60
      : '0' + (countDown.value % 60)
  })

  const timer = setInterval(() => {
    countDown.value--
    if (countDown.value === 0) clearInterval(timer)
  }, 1000)
  onUnmounted(() => {
    clearInterval(timer)
  })
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-status">
          <text class="label">药品订单 {{ orderDetail.actualPayment }}</text>
          <text class="status">
            {{ orderStatus[orderDetail.status] }}
          </text>
        </view>
        <view class="order-shippment">
          <template v-if="orderDetail.status === 11">
            <view class="region">
              <text class="iconfont icon-location"></text>
              {{ orderDetail.addressInfo.province }}
              {{ orderDetail.addressInfo.city }}
              {{ orderDetail.addressInfo.county }}
            </view>
            <view class="detail">
              {{ orderDetail.addressInfo.addressDetail }}
            </view>
            <view class="receiver">
              {{ orderDetail.addressInfo.receiver }}
              {{ orderDetail.addressInfo.mobile }}
            </view>
          </template>
          <template v-if="orderDetail.status === 12">
            <navigator
              hover-class="none"
              :url="`/subpkg_medicine/timeline/index?id=${props.orderId}`"
            >
              <view class="marker">{{ orderDetail.expressInfo.content }}</view>
              <view class="datetime">{{ orderDetail.expressInfo.time }}</view>
              <view class="arrow">
                <uni-icons size="18" color="#C3C3C5" type="forward" />
              </view>
            </navigator>
          </template>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view
          v-for="medicine in orderDetail.medicines"
          :key="medicine.id"
          class="medicine-list-item"
        >
          <image
            class="medicine-cover"
            :src="medicine.avatar"
            mode="aspectFill"
          />
          <view class="medicine-info">
            <text class="name">{{ medicine.name }}</text>
            <text class="unit symbol">24片</text>
            <text class="price">¥{{ medicine.amount }}</text>
          </view>
          <view class="quantity">x{{ medicine.quantity }}</view>
          <view class="guide">用法用量：{{ medicine.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item
            title="药品金额"
            :right-text="'¥' + orderDetail.payment"
          />
          <uni-list-item
            title="运费"
            :right-text="'¥' + orderDetail.expressFee"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="'-¥' + orderDetail.couponDeduction"
          />
          <uni-list-item
            title="实付款"
            :right-text="'¥' + orderDetail.actualPayment"
          />
          <uni-list-item title="订单编号" :right-text="orderDetail.orderNo" />
          <uni-list-item
            title="创建时间"
            :right-text="orderDetail.createTime"
          />
          <uni-list-item
            title="支付方式"
            :right-text="paymentMethods[orderDetail.paymentMethod]"
          />
        </uni-list>
      </view>

      <view class="notice-bar">
        <uni-notice-bar
          :text="`请在00:${minute}:${second}内完成支付，超时订单将取消`"
        />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="false">
          <view class="total-amount">
            需付款:
            <text class="number">¥39.00</text>
          </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  .medicine-page {
    padding-bottom: calc(env(safe-area-inset-bottom) + 155rpx);
  }

  .page-header {
    padding: 20rpx 30rpx 30rpx;
    // 需要一个高为300的背景图
    background-color: #eaf8f6;
    overflow: hidden;

    .order-status {
      display: flex;
      justify-content: space-between;
      line-height: 1;
      padding: 30rpx 0 0 6rpx;
      font-size: 32rpx;

      .label {
        color: #121826;
      }

      .status {
        color: #16c2a3;
      }
    }

    .order-shippment {
      line-height: 1;
      padding: 30rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-top: 40rpx;
      position: relative;

      .region {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #6f6f6f;
      }

      .icon-location {
        color: #ff7702;
        font-size: 28rpx;
        margin-right: 5rpx;
      }

      .detail {
        margin: 24rpx 0;
        font-size: 34rpx;
        color: #121826;
      }

      .receiver {
        font-size: 26rpx;
        color: #121826;
      }

      .marker {
        font-size: 28rpx;
        color: #16c2a3;
      }

      .datetime {
        // margin-left: 10rpx;
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #c3c3c5;
      }

      .arrow {
        position: absolute;
        top: 50%;
        right: 16rpx;
        transform: translateY(-50%);
      }
    }
  }

  .order-shop {
    padding: 20rpx 30rpx;
    margin: 10rpx 0;
    line-height: 1;
    font-size: 32rpx;
    color: #121826;
    font-weight: 500;

    .alt {
      font-size: 24rpx;
      color: #979797;
      margin-left: 10rpx;
    }
  }

  .medicine-list {
    padding: 0 30rpx;
    background-color: #fff;
  }

  .medicine-list-item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #ededed;
    position: relative;

    &:last-child {
      border-bottom: none;
    }

    .medicine-cover {
      width: 180rpx;
      height: 160rpx;
      float: left;
    }

    .medicine-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 160rpx;
      padding-left: 20rpx;

      .name {
        font-size: 30rpx;
        font-weight: 500;
        color: #121826;
      }

      .unit {
        color: #979797;
        font-size: 28rpx;
        display: flex;
        align-items: center;

        @include text-overflow(1);

        &.symbol::before {
          content: '处方药';
          line-height: 1;
          padding: 8rpx 10rpx;
          margin-right: 10rpx;
          border-radius: 4rpx;
          font-size: 24rpx;
          color: #fff;
          background-color: #16c2a3;
        }
      }

      .price {
        color: #eb5757;
        font-size: 32rpx;
      }
    }

    .quantity {
      top: 30rpx;
      right: 0;
      position: absolute;

      font-size: 30rpx;
      color: #121826;
    }

    .guide {
      clear: both;
      padding: 20rpx;
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #848484;
      border-radius: 10rpx;
      background-color: #f6f6f6;
    }
  }

  .order-info {
    padding: 0 30rpx;
    margin-top: 30rpx;
    background-color: #fff;

    .right-text {
      display: flex;
      align-items: center;
    }

    .copy {
      line-height: 1;
      padding: 6rpx 20rpx 4rpx;
      margin-right: 20rpx;
      font-size: 24rpx;
      color: #16c2a3;
      background-color: #fafafa;
      border-radius: 40rpx;
      border: 1rpx solid #16c2a3;
    }

    .number {
      font-size: 32rpx;
      color: #848484;
    }

    :deep(.uni-list-item__container) {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    :deep(.uni-list-item__content-title) {
      font-size: 32rpx !important;
      color: #3c3e42 !important;
    }

    :deep(.uni-list-item__extra-text) {
      font-size: 32rpx !important;
      color: #848484 !important;
    }

    :deep(.uni-icon-wrapper) {
      padding: 0 !important;
      margin-right: -10rpx !important;
      font-size: 36rpx !important;
      margin-top: 2rpx;
    }
  }

  .notice-bar {
    text-align: center;
    margin-top: 30rpx;
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom) + 145rpx);
  }

  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
    background-color: #fff;

    .buttons {
      flex: 1;
      display: flex;
    }

    .delete-botton {
      display: flex;
      flex-direction: column;
      color: #848484;
      text-align: center;
      font-size: 24rpx;
      margin: 0 60rpx 0 30rpx;
    }

    .uni-button {
      flex: 1;
      padding: 0 30rpx;

      &.minor {
        color: #16c2a3;
        margin-right: 20rpx;
        border: 1rpx solid #ededed;
        background-color: #fafafa;
      }
    }

    .total-amount {
      display: flex;
      align-items: center;
      width: 270rpx;
      font-size: 28rpx;
      color: #3c3e42;
    }

    .number {
      font-size: 40rpx;
      color: #eb5757;
      margin-left: 10rpx;
    }
  }
</style>
